<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14_九宫格布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            overflow: hidden;
        }
        #wrap .item{
            width: 248px;
            height: 360px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
        #wrap .item .price {
            color: #ff6700;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="cols">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>

    </div>
    <div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/phone_taobao.png" alt="" style="width: 190px; height: 253px; position: relative;">
            </div>
            <p class="title">纯色短袖</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_1.jpg" alt="" style="width: 190px; height: 253px; position: relative;">
            </div>
            <p class="title">秋冬康宝莱亲肤羊毛衫</p>
            <p class="price">￥499</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_2.jpg" alt="" style="width: 190px; height: 253px; position: relative;">
            </div>
            <p class="title">法式衣服</p>
            <p class="price">￥158.99</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_3.jpg" alt="" style="width: 190px; height: 253px; position: relative;">
            </div>
            <p class="title">新款慵懒风衣服</p>
            <p class="price">￥159</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_4.jpg" alt="" style="width: 190px; height: 253px; position: relative;">
            </div>
            <p class="title">小八梨形自制衣服</p>
            <p class="price">￥87</p>
        </div>
    </div>
    <script type="text/javascript">
        // 1.获取标签
        var btns = document.getElementsByTagName('button');
        var items = document.getElementsByClassName('item');
        // 2.监听按钮的点击
        btns[0].onclick = function () {
            // 3.循环
            nine_flex(3);
        }
        btns[1].onclick = function () {
            // 3.循环
            nine_flex(4);
        }
        btns[2].onclick = function () {
            // 3.循环
            nine_flex(5);
        }
        function nine_flex(colsNum){
            for(var i = 0; i < items.length; i++){
                items[i].style.float = 'left';

                items[i].parentNode.style.width = (3 * items[i].offsetWidth) + 'px';
            }
        }
    </script>
</body>
</html>